<template>
    <div>
        <a-table :loading="loading" :columns="columns" :sortDirections="['ascend', 'descend']" :data-source="data"
                 rowKey="id">
            <a slot="company" slot-scope="company">{{ company }}</a>
            <span slot="customTitle"><a-icon type="bank"/> 公司名称</span>
            <span slot="action" slot-scope="text, record, index">
                <a-tag color="red" v-if="!record.pay">等待结款</a-tag>
                <a-tag color="green" v-if="record.pay">结款完成</a-tag>
                <a-button v-if="!record.pay" type="link" @click="confirm(record, index)">结款</a-button>
                <a-button v-if="record.pay" type="link" @click="printReceipt(record)">打印小票</a-button>
            </span>
        </a-table>

        <!-- 打印预览 Modal -->
        <a-modal
                title="打印预览"
                :closable="false"
                :visible="commodityVisible"
        >
            <div id="printClk">
                <h2 class="self1">物流快递</h2>
                <h2 class="self">--结账单--</h2>
                <div>开单时间：{{ printClk.createAt }}</div>
                <hr/>

                <table>
                    <tr>
                        <td width="190">商品名称</td>
                        <td width="50" align="center">数量</td>
                        <td width="50" align="center">金额</td>
                    </tr>
                    <tr>
                        <td valign="top">{{ printClk.commodity }}</td>
                        <td>{{ printClk.count }}</td>
                        <td valign="top" align="right">{{ printClk.price / printClk.count }}</td>
                    </tr>
                </table>

                <hr/>

                <table>
                    <tr>
                        <td width="246">合计</td>
                        <td width="50" align="right">{{ printClk.price }}</td>
                    </tr>
                    <tr>
                        <td>微信支付</td>
                        <td align="right">{{ printClk.price }}</td>
                    </tr>
                </table>

                <hr/>

                <div>打印时间：{{ printClk.createAt }}</div>
                <div>备注：{{ printClk.description || '无' }}</div>
                <hr/>
                <h2 class="self2">欢迎再次光临</h2>
                <h2 class="self1">多谢回顾</h2>
            </div>
            <template slot="footer">
                <a-button key="back" @click="commodityVisible = false">
                    取消
                </a-button>
                <a-button key="submit" type="primary" v-print="print">
                    打印
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
    import { FindAllSale, SaveSale } from "../../api/sale";

    const columns = [
        {
            dataIndex: 'company',
            key: 'company',
            slots: { title: 'customTitle' },
            scopedSlots: { customRender: 'company' },
        },
        {
            title: '打款帐号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '商品',
            dataIndex: 'commodity',
            key: 'commodity',
        },
        {
            title: '数量',
            dataIndex: 'count',
            key: 'count'
        },
        {
            title: '总计',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '预留电话',
            key: 'phone',
            dataIndex: 'phone',
        },
        {
            title: '备注',
            dataIndex: 'description',
            key: 'description',
        },
        {
            title: '开票时间',
            dataIndex: 'createAt',
            key: 'createAt',
        },
        {
            title: '更多操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
        },
    ];

    export default {
        data() {
            return {
                loading: false,
                data: [],
                columns,
                printClk: {
                    commodity: '',
                    count: 0,
                    price: 0,
                    createAt: '',
                    description: '', // 备注
                },
                commodityVisible: false,
                print: {
                    id: 'printClk'
                },
            };
        },

        mounted() {
            this.loadTableData()
        },

        methods: {
            // 加载销售数据
            loadTableData() {
                this.loading = true;
                FindAllSale().then((res) => {
                    setTimeout(() => {
                        this.loading = false;
                        this.data = res.data;
                    }, 600)
                });
            },

            // 打印小票
            printReceipt(record) {
                // 动态传递当前记录数据到打印模板
                this.printClk = {
                    commodity: record.commodity,
                    count: record.count,
                    price: record.price,
                    createAt: record.createAt,
                    description: record.description, // 备注
                };
                this.commodityVisible = true;
            },

            // 确认结款
            confirm(record, index) {
                let that = this;
                this.$confirm({
                    title: '销售结款',
                    content: '我已确定' + record.company + '的销售金额 ¥' + record.price + '已经打入账户!',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        that.data[index].pay = true;
                        SaveSale(that.data[index]).then((res) => {
                            if (res.status) that.$message.success("销售结款成功");
                        });
                    },
                });
            },
        },
    };
</script>

<style scoped>
    @page {
        margin: 0 10mm;
    }

    #printClk {
        position: relative;
        top: 10%;
        left: 26%;
        padding: 10px;
        border: 1px solid #ddd;
        width: 313px;
        font-size: 10px;
    }

    hr {
        border: 0.5px dashed;
    }

    .self1 {
        padding-left: 105px;
    }
    .self2 {
        padding-left: 90px;
    }
    .self {
        padding-left: 100px;
    }
</style>
